<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="在线用户详情" width="600px">
    <Description :data="record" @register="registerDescription" />
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, useAttrs, unref } from "vue"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { detailSchema } from "./user.data"
  import * as userApi from "./api"
  import { Description, useDescription } from "/@/components/Description/index"
  import { useDrawer } from "/@/components/Drawer"
  
  const emit = defineEmits(["register"])
  const attrs = useAttrs()
  const record = ref<any>({})
  const [registerDescription] = useDescription({
    column: 2,
    bordered: false,
    schema: detailSchema,
    labelStyle: {
      marginLeft: "10px",
    },
  })

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    try {
      setDrawerProps({ confirmLoading: false, loading: true })
      record.value = await userApi.getOnlineUser({ id: data.record.id })
    } finally {
      setDrawerProps({ confirmLoading: false, loading: false })
    }
  })
</script>

<style scoped></style>
